<template>
    <el-dialog
        :before-close="handlerClose"
        :title.sync="dialogTitle"
        :visible.sync="showDialog"
        top="5vh"
        width="60%"
    >
        <el-row>
            <el-col :span="6">查询条件设置</el-col>
            <el-col :span="12">
                <div class="empty-box"></div>
            </el-col>
            <el-col :span="6">
                <el-button @click="resetPlan">重置</el-button>
                <el-button @click="savePlan">保存方案</el-button>
            </el-col>
        </el-row>
        <div style="border: solid 1px #ebebeb;padding: 20px">
            <div>
                <query-condition
                    v-if="conditions && conditions.length > 0"
                    @addCondition="handlerAddCondition"
                    @addSubCondition="handlerAddSubCondition"
                    @deleteCondition="handlerDeleteCondition"
                    @selectChange="handlerSelectChange"
                    @setValue="handlerSetValue"
                    :conditions="conditions"
                />
            </div>
            <div style="margin-top: 50px">
                <el-row style="margin-bottom: 10px" :gutter="30">
                    <el-col :span="3">
                        <span class="el-button el-button--text el-button--small default-text">方案设置</span>
                    </el-col>
                    <el-col :span="21">
                        <span class="el-button el-button--text el-button--small default-text">方案1</span>
                        <el-select>
                            <el-option label="并且" value="1"/>
                            <el-option label="或" value="2"/>
                        </el-select>
                        <span class="el-button el-button--text el-button--small default-text">方案2</span>
                    </el-col>
                </el-row>
            </div>
        </div>

        <el-row :gutter="10" style="margin: 60px auto 0">
            <el-col :span="12">
                <span class="el-button el-button--text el-button--small default-text">方案列表：</span>
                <el-select>
                    <el-option label="方案1" value="1"/>
                    <el-option label="方案2" value="2"/>
                </el-select>
            </el-col>
            <el-col :span="6">
                <div class="empty-box"></div>
            </el-col>
            <el-col :span="6">
                <el-button @click="resetPlan">重置</el-button>
                <el-button @click="doSearch" type="primary">筛选</el-button>
            </el-col>
        </el-row>
    </el-dialog>
</template>
<script>
import QueryCondition from "./QueryCondition";
export default {
    components: { QueryCondition },
    data() {
        return {
            showDialog: true,
            dialogTitle: "查询条件设置",
            //conditions: [],
            conditionsArr: [
                {
                    id: 1,
                    parentId: null,
                    field: "1",
                    relation: "1",
                    value: "",
                    order: 0
                }
            ],
            conditions: []
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.setConditions(this.conditionsArr);
        },
        handlerDeleteCondition(conditionId) {
            let currentCondition = this.conditionsArr.find(
                e => e.id === conditionId
            );
            let childConditions = this.conditionsArr.filter(
                e => e.parentId === conditionId
            );
            let deletedData = [];
            function deleteCondition(allData, findData) {
                findData.forEach(item => {
                    deletedData.push(item);
                    let childData = allData.filter(
                        element => element.parentId === item.id
                    );
                    if (childData.length > 0) {
                        deletedData = [...deletedData, ...childData];
                        deleteCondition(allData, childData);
                    }
                });
            }
            deleteCondition(this.conditionsArr, childConditions);
            deletedData = [currentCondition, ...deletedData].reverse();
            // 应该先删除下面的，再删除本身，否则会引起computed报错
            deletedData.forEach(item => {
                let condition = this.conditionsArr.find(e => e.id === item.id);
                let index = this.conditionsArr.indexOf(condition);
                this.conditionsArr.splice(index, 1);
            });
            this.setConditions(this.conditionsArr);
        },
        handlerAddSubCondition(conditionId) {
            let condition = this.conditionsArr.find(e => e.id === conditionId);
            let subConditions = this.conditionsArr.filter(
                item => item.parentId === conditionId
            );
            let order = 0;
            if (subConditions.length > 0) {
                let orders = subConditions.map(e => e.order);
                order = Math.max(orders);
            }
            this.conditionsArr.push({
                id: Date.parse(new Date()),
                parentId: conditionId,
                field: "",
                relation: "",
                value: "",
                order
            });
            this.setConditions(this.conditionsArr);
        },
        handlerAddCondition(parentConditionId) {
            let subConditions = this.conditionsArr.filter(
                e => e.parentId === parentConditionId
            );

            let orders = subConditions.map(e => e.order);
            let order = Math.max(orders);
            this.conditionsArr.push({
                id: Date.parse(new Date()),
                parentId: parentConditionId,
                field: "",
                relation: "",
                value: "",
                order
            });
            this.setConditions(this.conditionsArr);
        },
        handlerSelectChange(key, value, conditionId) {
            let condition = this.conditionsArr.find(e => e.id === conditionId);
            condition[key] = value;
            this.setConditions(this.conditionsArr);
        },
        handlerSetValue(value, conditionId) {
            let condition = this.conditionsArr.find(e => e.id === conditionId);
            condition.value = value;
            this.setConditions(this.conditionsArr);
        },
        setConditions(conditionsArr) {
            let arrCopy = JSON.parse(JSON.stringify(conditionsArr));
            let rootCondition = arrCopy.filter(item => !item.parentId);
            function getChildCondition(arr, allData) {
                arr.forEach(element => {
                    let childConditions = allData.filter(
                        item => item.parentId === element.id
                    );
                    if (childConditions.length > 0) {
                        element.conditions = childConditions;
                        getChildCondition(element.conditions, allData);
                    }
                });
                return arr;
            }
            this.conditions = getChildCondition(rootCondition, arrCopy);
            console.table(this.conditions);
        },
        resetPlan() {},
        savePlan() {},
        doSearch() {},
        handlerClose(done) {
            this.$emit("closeDialog");
            // done();
        }
    }
    // computed: {
    //conditions() {
    //还要加入防抖动代码
    //let arrCopy = JSON.parse(JSON.stringify(this.conditionsArr));
    //let rootCondition = arrCopy.filter(item => !item.parentId);

    //return getChildCondition(rootCondition, arrCopy);
    // 这里需要加一个锁防抖动,可以有四个地方可以放这个锁 data/vuex/localStorage/闭包
    // data/vuex中放会一直计算陷入死循环
    // 闭包中会造成栈溢出
    // 只有放到localStorage中了
    // function getLock() {
    //     return eval(localStorage.getItem("lock"));
    // }
    // function setLock(value) {
    //     localStorage.setItem("lock", value);
    // }
    // function getDataFromlocalStorage() {
    //     return JSON.parse(localStorage.getItem("conditions"));
    // }
    // function setDataTolocalStorage(data) {
    //     localStorage.setItem("conditions", JSON.stringify(data));
    // }
    // let lock = getLock();
    // setTimeout(() => {
    //     setLock(false);
    // }, 500);
    // if (lock) {
    //     return getDataFromlocalStorage();
    // } else {
    //     setLock(true);
    //     let data = getChildCondition(rootCondition, arrCopy);
    //     setDataTolocalStorage(data);
    //     return data;
    // }
    //}
    //}
};
</script>
<style>
.default-text {
    color: #606266;
    cursor: auto;
}
.default-text:hover {
    color: #606266;
}
</style>

